<template>
  <div class="login">
    <loginBase>
      <div class="box" slot="box">
        <ul class="form" @keyup.13="loginTest">
          <li class="inputLi">
            <span class="admin"></span>
            <input type="text" v-model="userPhone" placeholder="帐号">
          </li>
          <li class="inputLi">
            <span class="lock"></span>
            <input type="password" v-model="password" placeholder="密码">
          </li>
        </ul>
        <div class="operate">
          <el-checkbox class="forget" v-model="codePwd">记住密码</el-checkbox>
          <span @click="goWhere('forget')">忘记密码？</span>
        </div>
        <div class="footer">
          <b class="login" @click="loginTest">登录</b>
          <b class="toReg" @click="goWhere('reg')">去注册</b>
        </div>
      </div>
    </loginBase>
  </div>
</template>
<script type="text/ecmascript-6">
import LoginBase from '../base/loginBase/newLogBase'
import { mapActions, mapGetters } from 'vuex'
import { isMobile } from '@/assets/js/utils'
import md5 from 'md5'
export default {
  name: 'login',
  components: {
    LoginBase
  },
  data () {
    return {
      userPhone: '',
      password: '',
      ip: '',
      codePwd: false
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    goWhere (route) {
      this.$router.push({ name: route, query: this.$route.query })
    },
    setCookie (name, value, day) {
      let date = new Date()
      date.setDate(date.getDate() + day)
      document.cookie = name + '=' + value + ';expires=' + date
    },
    getCookie (name) {
      let reg = RegExp(name + '=([^;]+)')
      let arr = document.cookie.match(reg)
      if (arr) {
        return arr[1]
      } else {
        return ''
      }
    },
    loginTest () {
      if (this.userPhone === '') {
        this.$message({
          message: '请输入用户手机号',
          type: 'warning'
        })
      } else if (this.password === '') {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
      } else {
        this.login()
      }
    },
    login () {
      this.$ajax.post('/api/seller/account/login', {
        userName: this.userPhone,
        password: md5(this.password),
        domain: window.location.host
        // ip: this.ip
      }).then((data) => {
        if (data.data.code === '200') {
          this.setUserInfo(data.data.data)
          this.$message({
            message: '登录成功!',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.setCookie('__un__', this.userPhone, 30)
              this.setCookie('__pw__', this.password, 30)
              // this.$router.push({ name: 'userCenter' })
              if (parseInt(this.userInfo.shopBindStatus) === 1) {
                this.$router.push({ name: 'userCenter' })
              } else {
                this.$router.push({ name: 'bindShop' })
              }
              // if (localStorage.getItem('__isFirstReg__') && parseInt(localStorage.getItem('__isFirstReg__')) === 1) {
              //   this.$router.push({ name: 'giftStore' })
              //   localStorage.removeItem('__isFirstReg__')
              // } else {
              //   this.$router.push({ name: 'ordersNow', query: { q: 'l' } })
              // }
            }
          })
        } else if (data.data.code === '1019') {
          this.$message({
            message: '您已在域名' + data.data.message + '注册, 请在该域名下登录',
            type: 'warning'
          })
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    getIp () {
      this.$ajax.get('/ipApi', {
      }).then((data) => {
        if (data.status === 200) {
          this.ip = data.data.ip
        }
      }).catch((err) => {
        console.error(err)
      })
    },
    ...mapActions([
      'setUserInfo'
    ])
  },
  mounted () {
    if (this.getCookie('__un__') && this.getCookie('__pw__')) {
      this.userPhone = this.getCookie('__un__')
      this.password = this.getCookie('__pw__')
    }
  },
  beforeRouteEnter (to, from, next) {
    if (isMobile()) {
      next({ name: 'mobileLogin', query: to.query })
    } else {
      next()
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.login
  width 100%
  height 100%
  .box
    width 410px
    .form
      border 1px solid #DDDDDD
      border-radius 10px
      li
        height 72px
        box-sizing border-box
        padding 20px
        display flex
        border-bottom 1px solid #DDDDDD
        &:last-child
          border none
        span
          width 20px
          margin-right 20px
          vertical-align middle
        input
          flex 1
          border none
          outline none
          -webkit-appearance none
          font-size 20px
          line-height 50px
        .admin
          background url('../../assets/images/mobile/个人.png') no-repeat
          background-size 100%
        .lock
          background url('../../assets/images/mobile/密码.png') no-repeat
          background-size 100%
    .operate
      display flex
      justify-content space-between
      font-size 20px
      line-height 28px
      color #333333
      cursor pointer
      margin-bottom 60px
      margin-top 10px
      .forget, span
        font-size 14px
        line-height 18px
        color #333333
    .footer
      display flex
      align-items center
      b
        width 172px
        height 45px
        line-height 45px
        text-align center
        font-size 20px
        font-weight bold
        margin-right 50px
        border-radius 10px
        cursor pointer
      .login
        background #F16591
        box-shadow 8px 5px 11px RGBA(241, 101, 145, 0.3)
        color #ffffff
      .toReg
        background #ffffff
        box-shadow 0 -1px 11px RGBA(241, 101, 145, 0.23)
        color #F16591
</style>
